<template>
  <el-dialog
    class="customD"
    :visible.sync="custom"
    :show-close="false"
    width="433px"
  >
    <div class="header">
      <div class="tit">提交工单</div>
    </div>
    <div class="content">
      <el-form :model="form">
        <el-form-item label="工单类型" prop="gType">
          <el-select
            v-model="form['orderTypeId']"
            placeholder="请选择"
            style="width: 100%"
            @change="handleGtype"
            class="demo1"
          >
            <el-option
              v-for="item in this.typeList"
              :key="item.id"
              :label="item.workOrderName"
              :value="item.id"
              style="max-width: 370px"
              :title="item.workOrderName"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="customerIdList.length">
          <el-select
            v-model="form['orderTypeDetailId']"
            placeholder="请选择"
            style="width: 100%"
            @change="handleSubGtype"
          >
            <el-option
              v-for="item in customerIdList"
              :key="item.key"
              :label="item.name"
              :value="item.id"
              style="max-width: 370px"
              :title="item.workOrderName"
            />
          </el-select>
        </el-form-item>

        <el-row :gutter="24" v-if="formItemArr1.length != 0">
          <el-col :span="row_w" v-for="(i, idx) in formItemArr1" :key="idx">
            <template v-if="i.type == 'input'">
              <el-form-item :label="i.title" :prop="i.type + idx">
                <el-input
                  v-model="form.controlList[idx].value"
                  type="text"
                  clearable
                  :placeholder="i.describe"
                  autocomplete="off"
                  maxlength="50"
                  show-word-limit
                />
              </el-form-item>
            </template>
            <template v-if="i.type == 'textarea'">
              <el-form-item :label="i.title" :prop="i.type + idx">
                <el-input
                  v-model="form.controlList[idx].value"
                  type="textarea"
                  :rows="6"
                  clearable
                  :placeholder="i.describe"
                  autocomplete="off"
                  show-word-limit
                />
              </el-form-item>
            </template>
            <template v-if="i.type == 'upload'">
              <el-form-item :label="i.title" :prop="i.type + idx">
                <el-upload
                  class="upload-demo"
                  action="/merchantApi/oss/upload"
                  accept=".doc,.docx,.xls,.xlsx,.pdf"
                  :headers="{
                    auth_token: token,
                    auth_tmp: tmp,
                    auth_tck: tck,
                  }"
                  :file-list="
                    idx == 0
                      ? paymentDocuments
                      : idx == 1
                      ? paymentDocuments0
                      : idx == 2
                      ? paymentDocuments1
                      : paymentDocuments2
                  "
                  :before-upload="handleBefore"
                  :on-remove="(res, file) => handleRemove(res, file, idx)"
                  :on-success="(res, file) => handleSuccess(res, file, idx)"
                >
                  <el-button style="width: 120px" type="primary"
                    >上传文件</el-button
                  >
                </el-upload>
              </el-form-item>
            </template>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import cObj from "@/utils/config";
import { getUserInfo } from "@/utils/public";

export default {
  props: {
    type_info_list: {
      type: Array,
      default: () => [],
    },
    customerId_sub_list: {
      type: Array,
      default: () => [],
    },
    form_item_arr: {
      type: Array,
      default: () => [],
    },

    token: {
      type: String,
      default: "",
    },
    tmp: {
      type: Number,
    },
    tck: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      paymentDocuments: [], // 付款文件
      paymentDocuments0: [], // 付款文件
      paymentDocuments1: [], // 付款文件
      paymentDocuments2: [], // 付款文件

      typeList: [], //一级
      customerIdList: [], //2级
      formItemArr1: [], //3级
      form: {
        orderTypeId: "", //一级默认选择
        orderTypeDetailId: "",
        controlList: [],
      },
      row_w: 24,
      // custom: false,
      search: "",
      tellist: [
        {
          bg: "#FF8B4E",
          img: "l1",
          tit: "客服热线",
          tel: "400-888-2206",
        },
        {
          bg: "#3676E0",
          img: "l2",
          tit: "技术支持",
          tel: "029-88861183",
        },
        {
          bg: "#2C2A29",
          img: "l3",
          tit: "商务",
          tel: "400-888-2206",
        },
      ],
    };
  },

  computed: {
    ...mapState(["gongdan"]),
    custom: {
      get() {
        return this.$store.state.gongdan;
      },
      set(val) {
        this.$store.state.gongdan = val;
      },
    },
  },
  methods: {
    ...mapMutations(["changeGongdan", "changeRegisMess", "changeRegisText"]),
    getUserInfo,
    resetFiled() {
      this.form = {};
      this.customerId_sub_list = [];
      this.form_item_arr = [];
      this.paymentDocuments = [];
    },
    async checkRegis() {
      let isRegis = await this.$getMechantUserRegisInfo();
      console.log(isRegis);
      if (isRegis != "success") {
        if (isRegis == "create") {
          //未注册
          this.changeRegisText({
            tit: `${
              getUserInfo().userType == "main_user" ||
              getUserInfo().userType == "main_admin"
                ? "请先完善企业信息，审核通过后方可使用"
                : "请先完善企业信息后方可使用"
            }`,
            btn: "去完善",
          });
        } else if (isRegis == "wait" || isRegis == "processing") {
          //审核中
          this.changeRegisText({
            tit: "资料审核中，请稍候再试",
            btn: "",
          });
        } else if (isRegis == "fail" || isRegis == "refuse") {
          //审核失败,拒绝
          this.changeRegisText({
            tit: "企业信息审核未通过，请前往修改",
            btn: "去修改",
            command: 1,
          });
        }
        this.$store.commit("changeRegisMess", true);
        setTimeout(() => {
          this.$store.commit("changeRegisMess", false);
        }, 3000);
        return false;
      } else {
        return true;
      }
    },
    async handleSubmit() {
      let isRegis = await this.checkRegis();
      console.log(isRegis);
      if (isRegis) {
        console.log(this.form);
        let params = {
          orderTypeId: this.form.orderTypeId,
          orderTypeDetailId: this.form.orderTypeDetailId,
          controlList: this.form.controlList,
        };
        this.$http.post("/api/workOrderInfo/add", params).then((res) => {
          if (res.code === "0000") {
            this.$message.success("提交成功！");
            this.resetFiled();
            this.handleClose();
          }
        });
      }
    },
    handleBefore(file) {
      const is2M = file.size / 1024 / 1024 < 2;
      // if (!file.name.includes("p12") && !file.name.includes("p12")) {
      //   this.$message.warning("只支持p12格式");
      //   return false;
      // }
      if (!is2M) {
        this.$message.warning("上传文件大小不能超过2M");
        return false;
      }
      return true;
    },
    handleRemove(res, file, idx) {
      switch (idx) {
        case 0:
          this.paymentDocuments = [];
          break;
        case 1:
          this.paymentDocuments0 = [];
          break;
        case 2:
          this.paymentDocuments1 = [];
          break;
        default:
          this.paymentDocuments2 = [];
      }
      // this.form.paymentDocuments = undefined;
      this.form.controlList[idx].value = null;
      this.form.controlList[idx].describe = "";
    },
    handleSuccess(res, file, idx) {
      console.log(idx);
      // console.log(file);
      // console.log(res.data.id);
      switch (idx) {
        case 0:
          this.paymentDocuments = [];
          this.paymentDocuments = [file.raw];
          break;
        case 1:
          this.paymentDocuments0 = [];
          this.paymentDocuments0 = [file.raw];
          break;
        case 2:
          this.paymentDocuments1 = [];
          this.paymentDocuments1 = [file.raw];
          break;
        default:
          this.paymentDocuments2 = [];
          this.paymentDocuments2 = [file.raw];
      }

      // this.form.paymentDocuments = file.raw;
      this.form.controlList[idx].value = res.data.id;
      this.form.controlList[idx].describe = res.data.name;
      console.log(this.form.controlList);
      // this.submitFile();
    },
    submitFile() {
      var params = new FormData();
      // params.append("memberId", this.$route.query.id);
      params.append("file", this.form.paymentDocuments);
      console.log(params);
      // this.$http
      //   .post("/api/sub/member/base/saveWechatV2Cert", params)
      //   .then((res) => {
      //     if (res.code === "0000") {
      //       //console.log(res.data);
      //       this.$message.success("文件上传成功！");
      //     }
      //   });
    },
    handleGtype(val) {
      console.log(val);
      this.$http
        .get(`/api/workOrderInfo/getOrderTypeDarailByTypeId?typeId=${val}`)
        .then((res) => {
          if (res.code === "0000") {
            console.log(res.data);
            this.customerIdList = [];
            this.formItemArr1 = [];
            this.form.orderTypeDetailId = "";
            this.form.controlList = []; //reset

            if (res.data[0].name == "") {
              console.log("无2记菜单");
              this.formItemArr1 = res.data[0].controlList;
              this.form.controlList = res.data[0].controlList;
            } else {
              this.customerIdList = res.data;
            }
          }
        });
    },
    handleSubGtype(val) {
      let obj = this.customerIdList.find((item) => item.id == val);
      this.formItemArr1 = obj.controlList;
      this.form.controlList = obj.controlList;
      console.log(this.formItemArr1);
    },
    handleClose() {
      // this.form = {
      //   orderTypeId: "", //一级默认选择
      //   orderTypeDetailId: "",
      // };
      this.$store.commit("changeGongdan", false);
    },
    searchFromWebsite() {
      window.open(`${cObj.websiteUrl}helpAbout`);

      // if (process.env.VUE_APP_ENV == "production") {
      //   window.open("http://yuncnpay.com/helpAbout");
      // } else if (process.env.VUE_APP_ENV == "test") {
      //   window.open("http://192.168.2.142:30004/helpAbout");
      // } else if (process.env.VUE_APP_ENV == "pre") {
      //   window.open("http://pre.yuncnpay.com/helpAbout");
      // } else {
      //   window.open(`http://${window.location.hostname}:30004/helpAbout`);
      // }
    },
  },
  watch: {
    type_info_list: {
      handler(n, o) {
        if (n.length != 0) {
          this.typeList = n;
          this.form.orderTypeId = this.typeList[0].id;
        }
      },
    },
    customerId_sub_list: {
      handler(n, o) {
        // console.log(o);
        // console.log(n);
        if (n.length != 0) {
          this.customerIdList = n;
          this.form.orderTypeDetailId = this.customerIdList[0].id;
        }
      },
    },
    form_item_arr: {
      handler(n, o) {
        // console.log(o);
        // console.log(n);
        this.formItemArr1 = n;
        this.form.controlList = this.formItemArr1;
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  // height: 50px;
  padding: 14px 30px;
  border-bottom: 1px solid #d8d8d8;
  // display: flex;
  .tit {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1d1c1c;
  }
}
.content {
  height: 525px;
  overflow: scroll;
  padding: 25px 29px;
  // background: #ededed;

  :deep(.el-upload-list) {
    width: auto;
  }
  :deep(.el-button--primary) {
    background: #25b5d9;
  }
}
.footer {
  border-top: 1px solid #d8d8d8;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  :deep(.el-button) {
    width: 120px;
    height: 32px;
  }
  :deep(.el-button + .el-button) {
    margin-left: 16px;
  }
}

.del-wrapper {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 48px;
  height: 48px;
  // margin: 0 auto;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.customD {
  :deep(.el-dialog) {
    border-radius: 10px;
    // background: transparent;
    // box-shadow: 6px 8px 8px 0px rgba(208, 227, 251, 0.2),
    //   -6px 0px 8px 0px rgba(208, 227, 251, 0.2);
  }
  :deep(.el-dialog__header) {
    padding: 0;
  }
  :deep(.el-dialog__body) {
    padding: 0;
    // padding-bottom: 48px;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 35px;
  }

  :deep(.el-form-item__label) {
    text-align: left;
    line-height: 24px;
  }
}
</style>
